<template>
    <div>
        <h4>基础篇-工具函数</h4>
        <div>详情查看控制台</div>
    </div>
</template>

<script setup>
import { isRef, reactive, readonly, ref, toRef, toRefs, toValue, unref } from 'vue';

/**
 * 判断值是否为ref
 * 【说明】：readonly() 返回一个原始对象的只读代理对象、就是这个函数管理的数据只能读、不能修改
 */
console.log("isRef()", isRef(ref(1)));


/**
 * 判断值是否是ref，
 * 【说明】：判断值是否是ref、如果是返回ref的值，如果不是则返回判断的值本身
 */
let count = ref(0)
let center = reactive(10)
console.log("unref()", unref(count), unref(center));


/**
 * 数据解构
 * 【说明】：toRef 和 toRefs 就是解决 reactive 数据被解构时，不失去相应式
 * 
 * 【作用】：当解构和传递数据时，不丢失响应式、并返回一个ref
 * 
 * 【区别】：
 *          toRef：将对象某个属性变成响应式、也就是说只会将我们解构出的单个属性不丢失响应式
 *          toRefs：将对象全部属性变成响应式，也就是我们解构的所有属性都会不丢失响应式
 * 
 * 【注意】: toRef和toRefs对reactive正常生效、对ref则无意义，会报错，
 *          因为ref本身就是一个响应式引用、直接修改 count.value即可触发响应式更新
 */

// 把一个 对象的某个属性 变成响应式引用
const to = reactive({ name: 'zhangsan', age: 25 })
let toChange = toRef(to, "name")


toChange.value = "wwww"
console.log(toChange.value, to);

// 把一个 响应式对象的所有属性 都变成响应式引用
let { name: names, age } = toRefs(to)

names.value = "hhhh"
age.value = 20

console.log(names.value, age.value, to);



/**
 * toValue()
 * 【说明】：可以把任何值解包为一个普通值，包括：ref()、函数、普通值
 * 
 */
let message = ref("Hello Vue")
let foo = () => "你好"
console.log(message, foo());

console.log(toValue(message), toValue(foo()));


/**
 * isProxy()
 * 【说明】：判断是否由 reactive readonly shallowReactive() shallowReadonly() 创建
 *          reactive 用于创建引用对象的响应式
 *          readonly 用于创建一个只读对象
 *          shallowReactive 用于创建一个浅层的引用对象响应式(只响应第一层)
 *          shallowReadonly 用于创建一个浅层的只读对象(只响应第一层)
 */



 /**
  * isReactive()
  * 【说明】：判断是否由  reactive() 或 shallowReactive() 创建的代理。
  */


  /**
   * isReadonly()
   * 【说明】：判断是否值是否是只读对象
   */




</script>

<style></style>